<template>
    <div class="body">
        <div class="j_loginbox">
            <h1>欢迎来到军政宝</h1>
            <h2>首次登录自动注册</h2>

            <div class="j_form_li">
                <span>+86</span>
                <i></i>
                <input
                    class="phone"
                    type="tel"
                    placeholder="手机号"
                    @input="phonecheck()"
                    v-model="phone"
                    @paste="phonePaste($event)"
                />
            </div>
            <div class="j_form_li" style="margin-top: 0.64rem">
                <span style="margin-left: 1.9rem"></span>
                <input
                    class="phone"
                    type="tel"
                    placeholder="请输入邀请码（非必填）"
                    v-model="invite"
                />
            </div>

            <div
                class="j_btn_login"
                @click="getCapt()"
                :class="{ j_btn_loginactive: isRedclass }"
            >
                获取验证码
            </div>

            <div class="j_xieyi">
                <h3 class="j_true" @click="isxieyi = !isxieyi">
                    <img
                        src="../../assets/newimg/user/zhuce_icon_dui.png"
                        alt=""
                        v-show="isxieyi"
                    />
                    <img
                        src="../../assets/newimg/user/zhuce_icon_dui_h.png"
                        alt=""
                        v-show="!isxieyi"
                    />

                    <span>同意 </span>
                </h3>

                <a @click="$router.push('/xieyi')">《服务使用协议》</a>
                <!-- <a>《隐私政策》</a> -->
            </div>
        </div>

        <input
            type="tel"
            v-model="captchacode"
            ref="captcha"
            class="captcha"
            maxlength="4"
            @blur="handleFocus()"
            @input="captchacheck()"
            @paste="captchaPaste($event)"
            @focus="quxiaoover()"
        />

        <div class="shadow" v-show="iscaptchabox">
            <div class="sdbox">
                <h1>请输入验证码</h1>
                <h2>
                    <i>已发送至手机</i>
                    <span> {{ phone.replace(/\s+/g, '') | mobil }} </span>
                    <label @click="repeatsend()">{{ captchatext }}</label>
                </h2>
                <ul @click="cafocus()">
                    <li
                        :class="{
                            animation:
                                captchacode.length == 1 || !captchacode.length,
                        }"
                    >
                        {{ captchacode.split('')[0] }}
                    </li>
                    <li :class="{ animation: captchacode.length == 2 }">
                        {{ captchacode.split('')[1] }}
                    </li>
                    <li :class="{ animation: captchacode.length == 3 }">
                        {{ captchacode.split('')[2] }}
                    </li>
                    <li :class="{ animation: captchacode.length == 4 }">
                        {{ captchacode.split('')[3] }}
                    </li>
                </ul>
            </div>
        </div>
    </div>
</template>

<script>
import { axiosPostnotoken } from '../../axios';
import { Toast } from 'vant';
export default {
    name: '',
    data() {
        return {
            phone: '',
            phoneold: '',
            inputstate: true,
            isRedclass: false,
            isxieyi: true,

            showKeyboard: true,
            captchacode: '',
            iscaptchabox: false, // 显示验证码输入props
            captchatext: '',
            j_setInterval: null,
            session_id: '',
            invite: '',
        };
    },
    computed: {},
    mounted() {},
    methods: {
        quxiaoover() {
            document.body.style.overflow = '';
        },
        handleFocus() {
            document.body.style.overflow = 'hidden';
            let u = navigator.userAgent;
            let isIOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/);
            if (isIOS) {
                this.$refs.botFooter.style.bottom = window.innerHeight + 'px';
                setTimeout(() => this.reset(), 100);
            }
        },
        reset() {
            document.body.style.height = window.innerHeight + 'px';
            this.$refs.botFooter.style.bottom = 0;
        },
        inputBlur() {
            let u = navigator.userAgent;
            let isIOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/);
            if (isIOS) {
                setTimeout(() => {
                    const scrollHeight =
                        document.documentElement.scrollTop ||
                        document.body.scrollTop ||
                        0;
                    window.scrollTo(0, Math.max(scrollHeight - 1, 0));
                }, 200);
            }
        },
        blur() {
            window.scrollTo(0, 0);
        },
        phonecheck() {
            //检测字符串是否为数字与空格组合 || 是否大于13
            if (!/^[0-9\d\s]*$/.test(this.phone) || this.phone.length > 13) {
                this.phone = this.phone.substr(0, this.phone.length - 1);
            }
            //适当添加空格
            if (this.phone.length > this.phoneold.length) {
                switch (this.phone.length) {
                    case 3:
                        this.phone = this.phone + ' ';
                        break;
                    case 8:
                        this.phone = this.phone + ' ';
                        break;
                    case 13:
                        if (
                            !/^1[3456789]\d{9}$/.test(
                                this.phone.replace(/\s+/g, '')
                            ) &&
                            this.inputstate
                        ) {
                            this.inputstate = false;
                            this.isRedclass = false;
                            setTimeout(() => {
                                this.inputstate = true;
                            }, 1000);
                            return Toast({
                                message: '请输入正确的手机号码',
                                duration: 2000,
                            });
                        } else {
                            this.isRedclass = true;
                        }
                        break;
                    default:
                        break;
                }
            }
            this.phoneold = this.phone;
        },
        //检测复制文本
        phonePaste() {
            setTimeout(() => {
                //检测字符串是否为数字与空格组合 || 是否大于13
                if (
                    !/^[0-9\d\s]*$/.test(this.phone) ||
                    this.phone.length > 13
                ) {
                    return Toast({
                        message: '请输入正确的手机号码',
                        duration: 2000,
                    });
                }
                if (
                    !/^1[3456789]\d{9}$/.test(this.phone.replace(/\s+/g, '')) &&
                    this.inputstate
                ) {
                    this.isRedclass = false;
                    this.inputstate = false;
                    setTimeout(() => {
                        this.inputstate = true;
                    }, 1000);
                    return Toast({
                        message: '请输入正确的手机号码',
                        duration: 2000,
                    });
                } else {
                    this.isRedclass = true;
                }
                this.phone =
                    this.phone.slice(0, 3) +
                    ' ' +
                    this.phone.slice(3, 7) +
                    ' ' +
                    this.phone.slice(7);
            }, 1);
        },
        // 点击获取验证码按钮
        getCapt() {
            // if (!this.isRedclass) {
            //     return;
            // }
            this.sendCaptchacode();
        },
        // 发送验证码
        sendCaptchacode() {
            axiosPostnotoken(
                '/api/login/code',
                {
                    type: 'phone',
                    scene: '1',
                    mobile: this.phone.replace(/\s+/g, ''),
                },
                (res) => {
                    if (res.status != 1) {
                        return Toast({
                            message: res.msg,
                            duration: 2000,
                        });
                    }
                    Toast({
                        message: res.msg,
                        duration: 2000,
                    });
                    this.session_id = res.data.session_id;
                    this.daojishi();
                    this.iscaptchabox = true;
                    this.$refs.captcha.focus();
                }
            );
        },
        // 重新发送
        repeatsend() {
            if (this.captchatext != '重新发送') {
                return;
            }
            this.sendCaptchacode();
        },
        // 倒计时相关
        daojishi() {
            this.captchacode = '';
            let code = 60;
            clearInterval(this.j_setInterval);
            this.captchatext = '重新发送' + code + 's';
            this.j_setInterval = setInterval(() => {
                code--;
                this.captchatext = '重新发送' + code + 's';
                if (code == 0) {
                    clearInterval(this.j_setInterval);
                    this.captchatext = '重新发送';
                    code = 60;
                }
            }, 1000);
        },
        // 设置光标进入
        cafocus() {
            this.$refs.captcha.focus();
        },
        // 短信验证码输入
        captchacheck() {
            this.checkCaptcha();
        },
        // 短信验证码复制
        captchaPaste() {
            this.checkCaptcha();
        },
        // 输入验证码的验证
        checkCaptcha() {
            this.quxiaoover();
            if (this.captchacode.length != 4) {
                return;
            }
            this.$refs.captcha.blur();
            axiosPostnotoken(
                '/api/login/smslogin',
                {
                    mobile_code: this.captchacode,
                    scene: '1',
                    mobile: this.phone.replace(/\s+/g, ''),
                    session_id: this.session_id,
                    invite: this.invite,
                },
                (res) => {
                    if (res.status != '1') {
                        return Toast({
                            message: res.msg,
                            duration: 2000,
                        });
                    }
                    Toast({
                        message: res.msg,
                        duration: 2000,
                    });
                    let userinfo = res.data.user;
                    userinfo.token = res.data.token;
                    localStorage.setItem('userinfo', JSON.stringify(userinfo));
                    setTimeout(() => {
                        this.iscaptchabox = false;

                        this.$router.push('/');
                    }, 2000);
                }
            );
        },
    },
};
</script>

<style lang="less" scope>
body {
    background: #fff;
}
.shadow .sdbox ul .animation {
    justify-content: center;
    align-items: center;
    display: flex;
}

.animation::after {
    float: right;
    content: ' ';
    background-color: #000;
    letter-spacing: 0.88px;
    width: 2px;
    height: 0.9387rem;
    animation: cursor-blinks 1s infinite steps(1, start);
}

@keyframes cursor-blinks {
    0% {
        opacity: 1;
        display: block;
    }
    50% {
        opacity: 0;
        display: none;
    }
    100% {
        opacity: 1;
        display: block;
    }
}

.shadow {
    width: 100%;
    height: 100%;
    position: fixed;
    left: 0;
    top: 0;
    background: #fff;

    .sdbox {
        margin-top: 2.0907rem;
        overflow: hidden;

        h1 {
            font-size: 0.7253rem;
            font-weight: 400;
            color: #000000;
            text-align: center;
            margin-top: 2.4107rem;
        }

        h2 {
            font-size: 0.512rem;
            font-weight: 400;
            color: #858585;
            margin: 0.4053rem auto 1.9627rem;
            text-align: center;

            label {
                color: #ff3b3b;
                cursor: pointer;
            }
        }

        ul {
            display: flex;
            justify-content: center;
            align-items: center;

            li {
                background: #f9f8f8;
                border-radius: 0.4267rem;
                height: 1.92rem;
                line-height: 1.92rem;
                width: 1.92rem;
                display: inline-block;
                font-size: 0.9387rem;
                font-weight: 400;
                color: #000000;
                text-align: center;
                margin: 0 0.4053rem;
            }
        }
    }
}

.captcha {
    outline: none;
    width: 100%;
    height: 1px;
    border: 0;
    background-color: transparent;
    color: transparent;
}

.j_loginbox {
    padding: 1.4933rem;
}

.j_loginbox h1 {
    font-size: 1.1093rem;
    font-weight: 400;
    color: #000000;
}

.j_loginbox h2 {
    font-size: 0.5973rem;
    font-weight: 400;
    color: #858585;
    margin: 0.5973rem auto 1.7067rem;
}

.j_form_li {
    width: 13.0133rem;
    height: 2.1333rem;
    background: #f9f8f8;
    border-radius: 1.0667rem;
    margin: 0 auto;
    display: flex;
    justify-content: flex-start;
    align-items: center;
}

.j_form_li span {
    font-size: 0.5973rem;
    font-weight: 400;
    color: #858585;
    margin: 0 0.6187rem 0 0.8107rem;
}

.j_form_li i {
    width: 2px;
    height: 0.64rem;
    background: #bbbbbb;
    border-radius: 1px;
}

.j_form_li input {
    height: 1.8rem;
    font-size: 0.7253rem;
    font-weight: 400;
    color: #333;
    outline: none;
    border: 0;
    padding: 0 0.3627rem;
    background: transparent;
}

.j_form_li input::placeholder {
    font-size: 0.5973rem;
    font-weight: 400;
    color: #858585;
}

.j_btn_login {
    width: 13.0133rem;
    height: 2.1333rem;
    background: #ffd8d8;
    border-radius: 1.0667rem;
    font-size: 0.7253rem;
    font-weight: 500;
    color: #ffffff;
    text-align: center;
    line-height: 2.1333rem;
    cursor: pointer;
    margin: 1.0667rem auto 0.64rem;
}

.j_xieyi {
    display: flex;
    justify-content: flex-start;
    align-items: center;

    img {
        width: 0.47rem;
    }
}

.j_xieyi a {
    font-size: 0.4693rem;
    font-weight: 500;
    color: #436fcc;
}

.j_xieyi span {
    font-size: 0.4693rem;
    font-weight: 500;
    color: #999999;
    margin-left: 0.128rem;
    margin-right: 0.128rem;
}
</style>

<style scoped>
.j_text_1 {
    font-size: 0.7253rem;
    font-weight: 400;
    color: #000000;
    text-align: center;
    margin-top: 2.4107rem;
}

.j_text_2 {
    font-size: 0.512rem;
    font-weight: 400;
    color: #858585;
    margin: 0.4053rem auto 1.9627rem;
}

.j_text_2 p {
    display: flex;
    align-items: center;
    justify-content: center;
}

.j_text_2 p span {
    color: #ff3b3b;
    cursor: pointer;
}

.j_loginbox .j_btn_loginactive {
    background: #ff3b3b;
}

.j_text_2 p i {
    margin: 0 0.2rem;
}

.input-smscode {
    display: flex;
    align-items: center;
    justify-content: center;
}

.input-smscode > * {
    background: #f9f8f8;
    border-radius: 0.4267rem;
    height: 1.92rem;
    line-height: 1.92rem;
    width: 1.92rem;
    display: inline-block;
    font-size: 0.9387rem;
    font-weight: 400;
    color: #000000;
    text-align: center;
}

.input-smscode > *:not(:last-child) {
    margin-right: 0.5rem;
}
</style>
